<template>
    <div class="main-box">
        <div class="header-bar">
            <header-bar></header-bar>
        </div>
        <div class="nav-bar">
            <nav-bar></nav-bar>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import NavBar from '../components/Nav';
import HeaderBar from '../components/Header'
export default {
    name: 'app',
    components: {
        NavBar,
        HeaderBar
    }
}
</script>

<style>
.main-box {
    min-width: 1000px!important;
}
.header-bar {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;

}
.nav-bar {
    background: url('../assets/bg.jpg') left top no-repeat;
    width: 150px;
    height: 100%;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 2;
}
.content {
    margin-top: 50px;
    margin-left: 150px;
    padding: 20px;
}
</style>
